<!-- 个人资料 -->

<template>
	<view class="page-view">
		<u-form ref="infoForm" :model="infoForm" label-width="auto" :error-type="['border-bottom','toast']" :rules="rules">
			<u-form-item label="头像" prop="avatar" :required="required" right-icon="arrow-right">
				<view class="u-flex u-flex-1">
					<button class="u-reset-button u-flex-1 u-flex u-row-right" open-type="chooseAvatar"
						@chooseavatar="chooseavatarHandle" @click="chooseavatar">
						<u-avatar :src="infoForm.avatar" :size="60"></u-avatar>
					</button>
				</view>
			</u-form-item>
			<u-form-item label="昵称" prop="name" :required="required" right-icon="arrow-right">
				<u-input placeholder="请输入(最多10个字符)" v-model="infoForm.name" input-align="right" :clearable="false"
					type="nickname" :maxlength="10"></u-input>
			</u-form-item>
			<u-form-item label="性别" prop="sex" :required="required" right-icon="arrow-right">
				<view @click="sexPicker = true" class="u-flex-1 align-right">
					<text>{{sexLabel}}</text>
				</view>
			</u-form-item>
			<u-form-item label="年龄" prop="age" :required="required" right-icon="arrow-right">
				<view @click="agePicker = true" class="u-flex-1 align-right">
					<text style="color: #c0c4cc;" v-if="!infoForm.age">请选择</text>
					<text v-else>{{infoForm.age}}</text>
				</view>
			</u-form-item>
			<!-- <u-form-item label="学历" prop="edu_name" :required="required" right-icon="arrow-right">
				<u-input type="text" disabled input-align="right" v-model="infoForm.edu_name" :clearable="false"
					placeholder="请选择" @click="eduPicker=true"></u-input>
			</u-form-item> -->
			<u-form-item label="所属行业" prop="class_one_name" :required="required" right-icon="arrow-right">
				<view @click="classPicker=true" class="u-flex-1 align-right">
					<text style="color: #c0c4cc;" v-if="!infoForm.class_one_name">请选择</text>
					<text v-else>{{infoForm.class_one_name}}</text>
				</view>
			</u-form-item>
			<u-form-item label="能力标签" prop="class_three_name" :required="required" right-icon="arrow-right">
				<view @click="openClassTag" class="u-flex-1 align-right">
					<text style="color: #c0c4cc;" v-if="!infoForm.class_three_name">请选择</text>
					<text v-else>{{infoForm.class_three_name}}</text>
				</view>
			</u-form-item>
			<u-form-item label="所在城市" prop="city_code" right-icon="arrow-right" :required="required">
				<view @click="cityPicker=true" class="u-flex-1 align-right">
					<text style="color: #c0c4cc;" v-if="!infoForm.city">请选择</text>
					<text v-else>{{infoForm.city}}</text>
				</view>
			</u-form-item>
			<u-form-item label="常驻地点" prop="address" :required="required" right-icon="arrow-right">
				<view class="" style="width: 80%; text-align: right;margin-left: auto;line-height: 1.2;" @click="chosseAddress">
					<text style="color: #c0c4cc;" v-if="!infoForm.address">请选择</text>
					<text v-else>{{infoForm.address}}</text>
				</view>
			</u-form-item>
			<u-form-item label="头衔" prop="label" :required="required" label-position="top">
				<u-input type="textarea" maxlength="300" v-model="infoForm.label" :cursor-spacing="10" border
					:show-confirmbar="false" :clearable="false" placeholder="简单一句话展示自己的亮点。"></u-input>
			</u-form-item>
			<u-form-item label="能力介绍" prop="content" :required="required" label-position="top">
				<u-input type="textarea" maxlength="500" v-model="infoForm.content" :height="400" :cursor-spacing="10"
					:autoHeight="false" border :show-confirmbar="false" :clearable="false"
					placeholder="每个人都有自己的擅长能力，可以直接写下遇到哪些问题，可以找你帮忙，写写个人经历和经验的介绍。获取的过什么证件、资质、荣誉等，方便客户了解，信任和合作。"></u-input>
			</u-form-item>
			<!-- <u-form-item label="从业经历" :required="required" right-icon="plus-circle" prop="personal_resume">
				<u-input type="text" disabled input-align="right" :clearable="false" placeholder="请添加"
					@click="addWorkExp"></u-input>
			</u-form-item> -->
			<!-- 从业列表 -->
			<!-- <view class="u-p-l-30">
				<view class="u-flex u-border-bottom u-m-b-30 u-p-t-30 u-p-b-30" v-for="(item,index) in personal_resume"
					:key="index" @click="editWorkExp(index)">
					<view class="u-flex-1">
						<view class="u-font-32 font-medium u-m-b-20">{{item.componey}}</view>
						<view class="u-tips-color">{{item.position}}</view>
					</view>
					<u-icon name="arrow-right" size="32" color="#999999"></u-icon>
				</view>
			</view> -->
			<u-form-item prop="certificate_image" label-position="top" :required="required" label>
				<template slot="label">
					<view class="u-flex" @click="showTips(0)">
						<text>{{`资质证明(${infoForm.certificate_image&&infoForm.certificate_image.length}/30)`}}</text>
						<text class="iconfont icon-tishi u-type-warning u-font-26 u-m-l-20"></text>
					</view>
				</template>

				<u-upload ref="certificate_image" width="136" height="136" max-count="30" :action="$u.api.uploadUrl()"
					:header="$u.api.headerConfig()" name="pics" :formData="{filename: 'pics'}" :custom-btn="true"
					@on-uploaded="uploadImageHandle" index="certificate_image" :file-list="certificate_image"
					@on-remove="removeImage">
					<view slot="addBtn" class="u-m-l-10"><u-image src="/static/upload.png" mode="aspectFill" width="136"
							height="136"></u-image></view>
				</u-upload>
			</u-form-item>
			<u-form-item prop="certificate_honor" label-position="top" :required="required" label>
				<template slot="label">
					<view class="u-flex" @click="showTips(1)">
						<text>{{`荣誉证明(${infoForm.certificate_honor&&infoForm.certificate_honor.length}/30)`}}</text>
						<text class="iconfont icon-tishi u-type-warning u-font-26 u-m-l-20"></text>
					</view>
				</template>

				<u-upload ref="certificate_honor" width="136" height="136" max-count="30" :action="$u.api.uploadUrl()"
					:header="$u.api.headerConfig()" name="pics" :formData="{filename: 'pics'}" :custom-btn="true"
					@on-uploaded="uploadImageHandle" index="certificate_honor" :file-list="certificate_honor"
					@on-remove="removeImage">
					<view slot="addBtn" class="u-m-l-10"><u-image src="/static/upload.png" mode="aspectFill" width="136"
							height="136"></u-image></view>
				</u-upload>
			</u-form-item>
			<u-form-item prop="life_image" label-position="top" :border-bottom="false" label>
				<template slot="label">
					<view class="u-flex" @click="showTips(2)">
						<text>{{`展示人生高光时刻(${infoForm.life_image&&infoForm.life_image.length}/30)`}}</text>
						<text class="iconfont icon-tishi u-type-warning u-font-26 u-m-l-20"></text>
					</view>
				</template>

				<u-upload ref="life_image" width="136" height="136" max-count="30" :action="$u.api.uploadUrl()"
					:header="$u.api.headerConfig()" name="pics" :formData="{filename: 'pics'}" :custom-btn="true"
					@on-uploaded="uploadImageHandle" index="life_image" :file-list="life_image" @on-remove="removeImage">
					<view slot="addBtn" class="u-m-l-10"><u-image src="/static/upload.png" mode="aspectFill" width="136"
							height="136"></u-image></view>
				</u-upload>
			</u-form-item>
		</u-form>
		<view style="padding: 90rpx 0;">
			<u-button type="primary" hover-class="none" :loading="loading" @click="submitInfoForm">保存</u-button>
		</view>
		<!-- 性别 -->
		<u-action-sheet :list="sexList" v-model="sexPicker" @click="actionSheetCallback"></u-action-sheet>
		<!-- 出生日期 -->
		<u-picker mode="time" v-model="agePicker" title="选择出生日期" :confirm-color="$appConfig.mainColor" @confirm="confirmAge"
			:endYear="timeEndYear"></u-picker>
		<!-- 学历 -->
		<!-- <u-picker mode="selector" :range="eduList" v-model="eduPicker" title="选择学历" :confirm-color="$appConfig.mainColor"
			@confirm="confirmEdu" range-key="name"></u-picker> -->
		<!-- 行业 -->
		<u-picker mode="selector" :range="classList" v-model="classPicker" title="选择行业" :default-selector="defaultClass"
			:confirm-color="$appConfig.mainColor" @confirm="confirmClass" range-key="name"></u-picker>
		<!-- 从业年限 -->
		<!-- <u-picker mode="selector" :range="expList" v-model="expPicker" title="选择从业年限" :confirm-color="$appConfig.mainColor"
			@confirm="confirmExp" range-key="name"></u-picker> -->
		<!-- 城市选择 -->
		<u-picker mode="region" v-model="cityPicker" title="选择城市" :confirm-color="$appConfig.mainColor"
			@confirm="confirmCity" :area-code='["32", "3202"]' :params="{province:true,city:true,area:false}"></u-picker>

		<!-- 从业经历 -->
		<!-- <u-popup v-model="workExpPopup" mode="bottom" border-radius="20" :mask-close-able="false">
			<view class="" style="padding-bottom: 220rpx;">
				<view class=" u-border-bottom u-flex u-row-between" style="padding: 25rpx 35rpx;">
					<text class="u-tips-color" @click="workExpPopup=false">取消</text>
					<view class="u-font-32 font-medium ">
						从业经历
					</view>
					<view class="u-type-primary" @click="workExpPopupComplate">确认</view>
				</view>
				<view class="u-p-30">
					<u-form label-position="top" ref="workForm" :mode="workForm" class="u-m-b-40">
						<u-form-item label="公司名称" prop="componey">
							<u-input :customStyle="customInputStyle" placeholder="请输入" v-model="workForm.componey"
								:clearable="false"></u-input>
						</u-form-item>
						<u-form-item label="职位名称" prop="position">
							<u-input :customStyle="customInputStyle" placeholder="请输入" v-model="workForm.position"
								:clearable="false"></u-input>
						</u-form-item>
						<u-form-item label="在职时间" prop="timeRange">
							<view class="u-flex">
								<view class="u-flex-1">
									<u-input :customStyle="customInputStyle" placeholder="入职时间" disabled v-model="workForm.timeRange[0]"
										@click="startTimePicker=true"></u-input>
									<u-picker v-model="startTimePicker" mode="time" :defaultTime="workForm.timeRange[0]"
										:params="{year:true,month:true,day:false}" :confirm-color="$appConfig.mainColor" :end-year="timeEndYear"
										@confirm="confirmStartTime"></u-picker>
								</view>
								<view class=""><u-line margin="0 20rpx" color="#333" length="20"></u-line></view>
								<view class="u-flex-1">
									<u-input :customStyle="customInputStyle" placeholder="离职时间" disabled @click="endTimePicker=true"
										v-model="workForm.timeRange[1]"></u-input>
									<u-picker v-model="endTimePicker" mode="time" :defaultTime="workForm.timeRange[1]"
										:params="{year:true,month:true,day:false}" :confirm-color="$appConfig.mainColor" :end-year="timeEndYear"
										@confirm="confirmEndTime"></u-picker>
								</view>
							</view>
						</u-form-item>
					</u-form>
				</view>
			</view>
		</u-popup> -->
		<!-- 能力标签 -->
		<bb-picker title="能力标签" :classOneID="infoForm.class_one_id" :classTwoId="infoForm.class_two_id"
			:classThreeIds="infoForm.class_three_id" v-model="classTagPicker" @confirm="confirmClassTag"></bb-picker>

		<u-modal v-model="showmodel" :show-title="false" :show-cancel-button="true" :confirm-color="$appConfig.mainColor"
			@confirm="confirmChange">
			<view class="slot-content">
				<image src="/static/signOut.png" mode="widthFix" style="width: 100%;"></image>
				<view class="model-content u-p-30">
					<view class="u-m-b-30 u-font-36">确定提交修改？</view>
					<view class="u-font-28 u-tips-color">修改个人资料系统将会进行审核，在审核结束之前，您的相关资料将维持原状</view>
				</view>
			</view>
		</u-modal>

		<!-- 小提示 -->
		<u-popup v-model="tipsPicker" mode="bottom" border-radius="20" closeable :safe-area-inset-bottom="true">
			<view class=" u-border-bottom" style="padding: 25rpx 35rpx;">
				<view class="u-font-30 ">
					提示
				</view>
			</view>
			<view class="u-p-30 " style="min-height: 300rpx;">
				<text class="u-tips-color">{{tipsText}}</text>
			</view>
		</u-popup>
		<u-modal v-model="aggreeModal" @confirm="aggreelHandle" ref="aggreeModal" :async-close="true" title="提示"
			confirm-text="去设置" content="选取相册图片需要您授予应用权访问相册权限" show-cancel-button :confirm-color="$appConfig.mainColor"
			z-index="9999"></u-modal>
	</view>
</template>

<script>
	import formMixin from './mixin/profile_mixin.js'
	import common from '@/utils/wxApplet/common.js'
	import permission from '@/uni_modules/json-gps/js_sdk/wa-permission/permission.js'
	export default {
		mixins: [formMixin],
		data() {
			return {
				isSaved: false,
				showmodel: false,
				personal_resume: [],
				sexLabel: '男',
				loading: false,
				sexList: [{
						text: '男',
						value: '1'
					},
					{
						text: '女',
						value: '2'
					},
					{
						text: '保密',
						value: '0'
					}
				],
				eduList: [],
				classList: [],
				expList: [],
				customInputStyle: {
					backgroundColor: '#F8F8F8',
					borderRadius: '90rpx',
					padding: '10rpx 20rpx'
				},
				workForm: {
					componey: '',
					position: '',
					timeRange: ['', '']
				},
				editIndex: null,
				certificate_honor: [],
				certificate_image: [],
				life_image: [],
				required: false,
				tipsPicker: false,
				tipsText: '',
				aggreeModal: false
			}
		},
		onLoad(e) {
			this.queryEduOption()
			this.queryClassOption()
			this.queryExpOption()

			this.required = e.required == 'true' || this.$store.state.vuex_userInfo.is_power == 1;

			// #ifdef MP
			wx.enableAlertBeforeUnload({
				message: "当前信息没保存，确定退出",
				success: (res) => {},
				fail: (err) => {}
			})
			// #endif
		},
		computed: {
			timeEndYear() {
				const nowDay = new Date();
				return nowDay.getFullYear()
			}
		},
		// #ifndef MP
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			if (!this.isSaved) {
				uni.showModal({
					content: '当前信息没保存，确定退出',
					success: (res) => {
						if (res.confirm) {
							uni.navigateBack()
						}
					}
				})
				return true
			}
		},
		// #endif

		methods: {
			openClassTag() {
				if (this.infoForm.class_one_id) {
					this.classTagPicker = true
				} else {
					this.$u.toast('请选择所属行业')
				}
			},
			aggreelHandle() {
				this.aggreeModal = false
				permission.gotoAppPermissionSetting()
			},
			queryUserProfile() {
				common.getUserInfo().then(res => {
					const userinfo = res;
					const index = this.classList.findIndex(item => item.id == res.class_one_id)
					this.defaultClass = index ? [index] : [0]
					this.sexLabel = userinfo.sex == 1 ? '男' : userinfo.sex == 2 ? '女' : '保密';
					this.certificate_honor = (userinfo.certificate_honor || []).map(url => ({
						url
					}))
					this.certificate_image = (userinfo.certificate_image || []).map(url => ({
						url
					}))
					this.life_image = (userinfo.life_image || []).map(url => ({
						url
					}))
					this.personal_resume = (userinfo.personal_resume || []).map(item => {
						const workFormValue = item.split(',')
						return {
							componey: workFormValue[0],
							position: workFormValue[1],
							timeRange: [workFormValue[2], workFormValue[3]]
						}
					})
				})
			},
			actionSheetCallback(index) {
				uni.hideKeyboard();
				this.infoForm.sex = this.sexList[index].value;
				this.sexLabel = this.sexList[index].text;
			},
			workExpPopupComplate() {
				if (!this.workForm.componey) {
					this.$u.toast('请填写公司名称')
					return
				}
				if (!this.workForm.position) {
					this.$u.toast('请填写职位名称')
					return
				}
				if (!this.workForm.timeRange[0] || !this.workForm.timeRange[1]) {
					this.$u.toast('请选择入职日期')
					return
				}
				if (new Date(this.workForm.timeRange[0]).getTime() > new Date(this.workForm.timeRange[1]).getTime()) {
					this.$u.toast('请选择正确的入职日期')
					return
				}
				if (new Date(this.workForm.timeRange[0]).getTime() > new Date().getTime() ||
					new Date(this.workForm.timeRange[1]).getTime() > new Date().getTime()) {
					this.$u.toast('请选择正确的入职日期')
					return
				}
				if (this.editIndex != null) {
					this.personal_resume.splice(this.editIndex, 1, {
						...this.workForm
					})
				} else {
					this.personal_resume.push({
						...this.workForm
					})
				}
				this.workForm = {
					componey: '',
					position: '',
					timeRange: ['', '']
				}
				this.workExpPopup = false
				this.infoForm.personal_resume = this.personal_resume.map(item => {
					const values = Object.values(item).join(',')
					return values
				})
			},
			addWorkExp() {
				if (this.personal_resume.length >= 5) {
					this.$u.toast('最多可以添加5条经历')
					return
				}
				this.editIndex = null;
				this.workExpPopup = true
			},
			editWorkExp(index) {
				this.editIndex = index;
				this.workForm = this.personal_resume[index]
				this.workExpPopup = true
			},
			chosseAddress() {
				if (this.infoForm.city) {
					this.$gps.lock = false;
					this.$gps.getLocation().then(res => {
						if (res) {
							uni.chooseLocation({
								keyword: this.infoForm.city,
								success: (res) => {
									// console.log(res);
									this.infoForm.address = res.address
									this.infoForm.lat = res.latitude;
									this.infoForm.lng = res.longitude
								},
								fail: (err) => {
									console.log('取消');
								}
							})
						}
					})
				} else {
					this.$u.toast('请选择所在城市')
				}

			},
			chooseavatarHandle(e) {
				const fileUrl = e.detail.avatarUrl;
				this.$u.api.uploadImage(fileUrl).then(res => {
					this.infoForm.avatar = res;
				})
			},
			async chooseavatar() {
				// #ifdef APP-PLUS
				if (await permission.premissionCheck('CAMERA_EXTERNAL_STORAGE')) {
					uni.chooseImage({
						count: 1,
						crop: {
							width: 160,
							height: 160
						},
						success: (res) => {
							const fileUrl = res.tempFilePaths[0]
							this.$u.api.uploadImage(fileUrl).then(res => {
								this.infoForm.avatar = res;
							})
						}
					})
				} else {
					this.aggreeModal = true
				}
				// #endif
			},
			// 上傳圖片
			uploadImageHandle(lists, name) {
				const list = [];
				this.isCheck = true;
				lists.map(item => {
					if (!item.error) {
						let url = item.response ? item.response.data.url : item.url;
						list.push(url)
					}
				})
				this.infoForm[name] = list;
			},
			// 移除圖片
			removeImage(index, list, name) {
				this.infoForm[name].splice(index, 1)
			},
			// 学历选项
			queryEduOption() {
				this.$u.api.public.edu_list().then(res => {
					this.eduList = res
				})
			},
			// 行业选项
			queryClassOption(pid = 0) {
				this.$u.api.public.industry_class({
					pid
				}).then(res => {
					if (pid == 0) {
						this.classList = res
						this.queryUserProfile()
					}
				})
			},
			// 从业经验选项
			queryExpOption() {
				this.$u.api.public.exp_list().then(res => {
					this.expList = res
				})
			},
			// 表单保存
			submitInfoForm() {
				if (this.required) {
					console.log('需验证');
					this.$refs.infoForm.validate(valid => {

						if (valid) {
							if (this.isCheck) {
								this.showmodel = true
							} else {
								this.confirmChange()
							}
						} else {
							console.log('验证失败', valid);
						}
					});
				} else {
					console.log('无需验证');
					this.loading = true
					this.$u.api.saveProfile(this.infoForm).then(res => {
						// #ifdef MP
						wx.disableAlertBeforeUnload()
						// #endif
						this.isSaved = true
						this.$u.toast('保存成功')
						setTimeout(() => {
							common.getUserInfo().then(res => {
								uni.navigateBack()
							})
						}, 1000)
					}).finally(() => {
						this.loading = false
					})
				}
			},
			confirmChange() {
				this.loading = true
				this.$u.api.saveProfile(this.infoForm).then(res => {
					// #ifdef MP
					wx.disableAlertBeforeUnload()
					// #endif
					this.isSaved = true
					this.showmodel = false
					this.$u.toast('保存成功')
					setTimeout(() => {
						common.getUserInfo().then(res => {
							uni.navigateBack()
						})

					}, 1000)

				}).finally(() => {
					this.loading = false
				})
			},
			showTips(index) {
				const tips = [
					`资质证明是为了方便用户直观了解您的能力和产生信任。所以需要上传相关的凭证，图片上不能出现二维码、身份证号码、手机号等敏感信息。`,
					`自己获得过的奖项，荣誉证书，各类社会荣誉等。图片上不要出现身份证号码和二维码。`,
					`名人合影、活动合影、目前或者之前的工作照、参加慈善公益等照片都可以图片上传。图片上不能出现二维码、身份证号码、手机号等敏感信息。`
				]
				this.tipsText = tips[index];
				this.tipsPicker = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-reset-button {
		padding-left: 60rpx;
	}

	.page-view {
		margin-top: 30rpx;
		padding: 0 30rpx;
		background-color: #fff;
	}

	.form-item {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
</style>